<template>
  <el-container class="container">
    <el-header>
      <el-row>
        <el-col :xs="0" :sm="2" :md="5"
          ><div class="grid-content bg-purple">&nbsp;</div></el-col
        >
        <el-col :xs="24" :sm="20" :md="14" class="flex">
          <img src="@/assets/logo.png" class="logo" />
          <span class="title">
            Uctoo
          </span>
          <el-divider class="divider" direction="vertical"></el-divider>
          <span class="title">订单支付</span>
        </el-col>
        <el-col :xs="0" :sm="2" :md="5"
          ><div class="grid-content bg-purple">&nbsp;</div></el-col
        >
      </el-row>
    </el-header>
    <el-main>
      <el-row v-if="orderInfo !== null">
        <el-col :xs="0" :sm="2" :md="5"
          ><div class="grid-content bg-purple">&nbsp;</div></el-col
        >
        <el-col :xs="24" :sm="20" :md="14">
          <div class="content">
            <el-row>
              <el-col :xs="2" :sm="3" :md="5"
                ><div class="grid-content bg-purple">&nbsp;</div></el-col
              >
              <el-col :xs="20" :sm="18" :md="14">
                <div class="order-detail">
                  <div>
                    <div class="order-tit">
                      <dl>
                        <dt>商品订单：</dt>
                        <dd>{{ orderInfo.out_order_id }}</dd>
                      </dl>
                    </div>
                    <div class="order-tit">
                      <span
                        >支付金额：<em class="rmb"
                          ><i>¥</i>{{ orderInfo.final_price | price2penny }}</em
                        ></span
                      >
                      <a
                        @click="handleOrderDetails"
                        class="order-view"
                        data-action="expend"
                        ><span>订单详情</span>
                        <i
                          style="color:#707070"
                          :class="
                            !detailVisible
                              ? 'el-icon-caret-bottom'
                              : 'el-icon-caret-top'
                          "
                        ></i>
                      </a>
                    </div>
                    <div
                      :class="detailVisible ? 'show' : 'hide'"
                      class="order-con"
                    >
                      <dl>
                        <dt>商品名称：</dt>
                        <dd>{{ product_infos.title }}</dd>
                      </dl>
                      <dl>
                        <dt>支付订单：</dt>
                        <dd>{{ out_trade_no }}</dd>
                      </dl>
                      <dl>
                        <dt>应付金额：</dt>
                        <dd>
                          <span class="rmb"
                            ><i>￥</i
                            >{{ orderInfo.final_price | price2penny }}</span
                          >
                        </dd>
                      </dl>
                      <dl>
                        <dt>购买时间：</dt>
                        <dd>{{ orderInfo.created_at }}</dd>
                      </dl>
                    </div>
                  </div>
                </div>
                <div class="pay-method">
                  <dl>
                    <dt>支付方式：</dt>
                    <dd class="pay-channel">
                      <div class="pay-method-list-tit">
                        <div
                          v-for="mtd in paymethods"
                          :key="mtd.index"
                          :class="{ selected: mtd.select }"
                          @click="paymethod(mtd.index)"
                        >
                          <span class="pay-method-name">{{ mtd.name }}</span>
                          <i v-if="mtd.select" class="icon el-icon-check"></i>
                        </div>
                      </div>
                    </dd>
                  </dl>
                  <div class="pay-method-details">
                    <div class="wechat-pay" v-if="paymethodIndex === 0">
                      <div class="clearfix">
                        <div class="fl">
                          <div class="wxpay-qrcode-wrap">
                            <el-image
                              style="width:100%;height:100%"
                              fit="cover"
                              :src="qrcodeUrl"
                              class="wxpay-qrcode"
                            ></el-image>
                          </div>
                          <div class="wxpay-qrcode-notice">
                            请打开手机微信，扫一扫完成支付
                          </div>
                        </div>
                        <div class="fl wechat-qrcode-tip">
                          <img
                            src="http://midas.gtimg.cn/enterprise/images/ep_sys_wx_tip.jpg"
                          />
                        </div>
                      </div>
                    </div>
                    <div class="tencent-pay" v-if="paymethodIndex === 1">
                      <div class="clearfix">
                        <div class="fl">
                          <div class="wxpay-qrcode-wrap">
                            <!-- <el-image
                              style="width:100%;height:100%"
                              fit="cover"
                              :src="qrcodeUrl"
                              class="wxpay-qrcode"
                            ></el-image> -->
                          </div>
                          <div class="qqpay-qrcode-notice">
                            请打开手机微信，扫一扫完成支付
                          </div>
                        </div>
                        <div class="fl wechat-qrcode-tip">
                          <img
                            src="http://midas.gtimg.cn/enterprise/images/ep_sys_qq_tip.jpg"
                          />
                        </div>
                      </div>
                    </div>
                    <div class="bank-pay" v-if="paymethodIndex === 2">
                      <el-row>
                        <label>
                          <span class="bank-pay-label">
                            银行类型:
                          </span>
                          <el-radio-group v-model="radioBankKind">
                            <el-radio :label="0">个人银行</el-radio>
                            <el-radio :label="1">企业银行</el-radio>
                          </el-radio-group>
                        </label>
                      </el-row>
                      <el-row>
                        <label class="fl">
                          <span class="bank-pay-label">
                            选择银行
                          </span>
                        </label>
                        <div class="bank-pay-banks">
                          <div
                            class="bank"
                            :class="{ selected: bank.select }"
                            v-for="(bank, index) in banks"
                            :key="index"
                            @click="paybank(index)"
                          >
                            <span>{{ bank.name }}</span>
                            <i
                              v-if="bank.select"
                              class="icon el-icon-check"
                            ></i>
                          </div>
                        </div>
                      </el-row>
                      <el-row>
                        <label class="fl">
                          <span class="bank-pay-label">
                            选择卡种:
                          </span>
                        </label>

                        <el-radio-group v-model="cardKind">
                          <el-radio :label="0">储蓄卡</el-radio>
                          <el-radio :label="1">信用卡</el-radio>
                        </el-radio-group>
                      </el-row>
                      <el-row>
                        <el-button type="primary">立即支付</el-button>
                      </el-row>
                    </div>
                  </div>
                </div>
              </el-col>
              <el-col :xs="2" :sm="3" :md="5"
                ><div class="grid-content bg-purple">&nbsp;</div></el-col
              >
            </el-row>
          </div>
        </el-col>
        <el-col :xs="0" :sm="2" :md="5"
          ><div class="grid-content bg-purple">&nbsp;</div></el-col
        >
      </el-row>
    </el-main>
  </el-container>
</template>

<script>
import { unipayInit, wechatpay } from "@/api/unipay";
import QRCode from "qrcode";
export default {
  name: "unipay_order",
  data() {
    return {
      detailVisible: false,
      paymethods: [
        {
          index: 0,
          name: "微信支付",
          select: true
        }
        // {
        //   index: 1,
        //   name: "QQ钱包支付",
        //   select: false
        // },
        // {
        //   index: 2,
        //   name: "网银支付",
        //   select: false
        // }
      ],
      banks: [
        { name: "工商银行", select: true },
        { name: "农业银行", select: false },
        { name: "招商银行", select: false },
        { name: "建设银行", select: false },
        { name: "中国银行", select: false },
        { name: "邮政银行", select: false },
        { name: "交通银行", select: false },
        { name: "广发银行", select: false },
        { name: "民生银行", select: false },
        { name: "平安银行", select: false },
        { name: "光大银行", select: false },
        { name: "兴业银行", select: false },
        { name: "中信银行", select: false },
        { name: "北京银行", select: false },
        { name: "上海农商", select: false },
        { name: "浦发银行", select: false },
        { name: "宁波银行", select: false },
        { name: "南京银行", select: false },
        { name: "东亚银行", select: false }
      ],
      radioBankKind: 0,
      cardKind: 0,
      orderInfo: null,
      detail: null,
      qrcodeUrl: null,
      out_trade_no: null
    };
  },
  computed: {
    paymethodIndex() {
      return this.paymethods.findIndex(el => el.select);
    },
    product_infos() {
      return JSON.parse(this.orderInfo.detail.product_infos);
    }
  },
  methods: {
    handleOrderDetails() {
      this.detailVisible = !this.detailVisible;
    },
    paymethod(index) {
      this.paymethods.forEach(el => {
        if (el.index === index) {
          el.select = true;
        } else {
          el.select = false;
        }
      });
    },
    paybank(_index) {
      this.banks.forEach((el, index) => {
        if (index === _index) {
          el.select = true;
        } else {
          el.select = false;
        }
      });
    }
  },
  async created() {
    let data = this.$route.query;
    if (JSON.stringify(data) !== "{}") {
      let { data: orderInfo } = await unipayInit(data);
      this.orderInfo = orderInfo;
    }
    let { code, data: qrcodeInfo } = await wechatpay({
      out_order_id: data.out_order_id
    });
    if (code === 10000) {
      this.qrcodeUrl = await QRCode.toDataURL(qrcodeInfo.code_url);
      this.out_trade_no = qrcodeInfo.out_trade_no;
    }
  },
  filters: {
    price2penny: value => {
      return (value / 100).toFixed(2);
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  -moz-user-select: none; /*火狐*/
  -webkit-user-select: none; /*webkit浏览器*/
  -ms-user-select: none; /*IE10*/
  -khtml-user-select: none; /*早期浏览器*/
  user-select: none;
}
.container {
  min-height: 100vh;
  background-color: #efefef;
  .flex {
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
  }
  .el-header {
    background-color: white;
    .logo {
      width: 60px;
      height: 60px;
      vertical-align: middle;
      margin-right: 5px;
    }

    .divider {
      height: 20px;
      margin: 20px;
    }
    .title {
      font-weight: bold;
      margin: 0;
      font-size: 20px;
      line-height: 60px;
    }
  }
  .content {
    padding-bottom: 40px;
    background-color: white;
    .order-detail {
      border-bottom: 1px solid #f3f3f3;
      padding: 10px 0 20px;
      .order-tit {
        position: relative;
        dl {
          padding-bottom: 12px;
        }
        dt,
        dd {
          font-size: 14px;
        }
        dt {
          float: left;
          color: #000;
          font-weight: 700;
        }
        dd {
          color: #707070;
        }
        span {
          font-size: 14px;
          color: #000;
          font-weight: 700;
          em {
            color: #0ac265;
            font-weight: 400;
            font-size: 24px;
          }
        }
        .rmb {
          font-style: normal;
          margin: 0 8px 0 4px;
          i {
            font-style: normal;
            font-size: 18px;
          }
        }
        .order-view {
          position: relative;
          margin-left: 10px;
          font-size: 14px;
          padding-right: 15px;
          transition: color 0.1s ease-in;
          span {
            color: #707070;
          }
          .icon {
          }
          .icon-arrow {
            position: absolute;
            right: -2px;
            top: 50%;
            margin-top: -4px;
            width: 10px;
            height: 8px;
            background-position: -35px -175px;
          }
        }
      }
      .order-con {
        padding-left: 72px;
        dl {
          margin-top: 15px;
          margin-bottom: 0;
          clear: both;
          dt {
            color: #707070;
            float: left;
          }
          dd {
            color: #707070;
          }
          &::after {
            content: "";
            height: 0;
            line-height: 0;
            overflow: hidden;
            visibility: hidden;
            clear: both;
            display: table;
          }
        }
      }
    }
    .pay-method {
      padding-top: 20px;
      dl {
        dt {
          line-height: 44px;
          color: #000;
          font-weight: 700;
          font-size: 14px;
        }
        dd {
          padding-left: 0;
          float: none;
        }
        &::after {
          content: "";
          height: 0;
          line-height: 0;
          overflow: hidden;
          visibility: hidden;
          clear: both;
          display: table;
        }
        .pay-channel {
          margin-left: 0;
          .pay-method-list-tit {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            > div {
              position: relative;
              width: 130px;
              height: 44px;
              display: flex;
              align-items: center;
              justify-content: center;
              border: 1px solid #dedede;
              cursor: pointer;
              margin-right: 10px;
              transition: border-color 0.1s ease-in, color 0.1s ease-in;
              span {
                display: inline-block;
                color: #707070;
                font-size: 14px;
                line-height: 25px;
                vertical-align: middle;
              }
              &:hover {
                border-color: #8dafdf;
              }
            }
            > div.selected {
              border: 2px solid #3879d1;
              .icon {
                position: absolute;
                bottom: 0;
                right: 0;
                color: white;
                z-index: 888;
                font-size: 12px;
              }
              &::after {
                content: "";
                display: inline-block;
                position: absolute;
                bottom: 0;
                right: 0;
                width: 0;
                height: 0;
                border: 10px solid;
                border-color: transparent #3879d1 #3879d1 transparent;
              }
            }
          }
        }
      }
      .pay-method-details {
        .wxpay-qrcode-wrap {
          width: 196px;
          height: 196px;
          margin-bottom: 10px;
        }
        .wechat-qrcode-tip {
          margin-left: 40px;
          margin-top: -10px;
        }
        .wxpay-qrcode-notice {
          height: 30px;
          line-height: 30px;
          background-color: #00c800;
          font-size: 12px;
          color: #fff;
          text-align: center;
          margin-bottom: 20px;
        }
        .qqpay-qrcode-notice {
          height: 30px;
          line-height: 30px;
          background-color: #55a2e3;
          font-size: 12px;
          color: #fff;
          text-align: center;
          margin-bottom: 20px;
        }
      }
      .bank-pay {
        .bank-pay-label {
          display: inline-block;
          text-align: left;
          width: 75px;
          font-size: 14px;
          margin-right: 2px;
          position: relative;
          line-height: 1.5;
          z-index: 0;
          color: #707070;
        }
        .bank-pay-banks {
          display: flex;
          justify-content: flex-start;
          align-items: flex-start;
          flex-wrap: wrap;
          .bank {
            display: flex;
            justify-content: center;
            align-items: center;
            background: #fff;
            width: 110px;
            height: 30px;
            border: 1px solid #dddede;
            cursor: pointer;
            transition: border-color 200ms;
            color: #707070;
            font-size: 12px;
            margin: 0 5px 5px 0;
            &:hover {
              border-color: #8dafdf;
            }
          }
          .selected {
            position: relative;
            border: 2px solid #3879d1;
            .icon {
              position: absolute;
              bottom: 0;
              right: 0;
              color: white;
              z-index: 888;
              font-size: 12px;
            }
            &::after {
              content: "";
              display: inline-block;
              position: absolute;
              bottom: 0;
              right: 0;
              width: 0;
              height: 0;
              border: 10px solid;
              border-color: transparent #3879d1 #3879d1 transparent;
            }
          }
        }
      }
    }
  }
  .hide {
    display: none;
  }
  .show {
    display: block;
  }
}
.el-row {
  margin-bottom: 30px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: transparent;
}
.bg-purple {
  background: transparent;
}
.bg-purple-light {
  background: transparent;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background: transparent;
}
</style>
